<template>
  <div class="register">
    <van-steps :active="active" active-icon="arrow" active-color="#df2d2d">
      <van-step>输入手机号</van-step>
      <van-step>输入验证码</van-step>
      <van-step>输入密码</van-step>
    </van-steps>
    <div class="create-user">
      <van-field
        v-show="active===0? true:false"
        v-model="username"
        @blur="usernamemsg"
        @input="usernamemsg1"
        placeholder="请输入您的手机号"
      />
      <van-field v-show="active===1? true:false" v-model="msm" placeholder="验证码" />
      <van-field v-show="active===2?true:false" v-model="upwd1" placeholder="请输入您的密码" />
      <van-field
        @blur="passwordmsg"
        v-show="active===2?true:false"
        v-model="upwd2"
        placeholder="请再次输入您的密码"
      />
    </div>

    <p class="tip-wrapper">
      <label onclick>
        <input id="term" type="checkbox" name="terms" checked="checked" class="mt" />
        我已阅读并同意
        <a href="//i.meituan.com/about/terms">《美团网用户协议》</a>
      </label>
    </p>
    <div class="btn-wrapper">
      <van-button class="regBtn" type="danger" :disabled="!flag1" @click="next()">{{moretext}}</van-button>
    </div>
    <footer>
      <div class="copyright">
        <span class="copyright">
          © 猫眼电影 客服电话：
          <a data-evt="ft/hotline" href>400-670-5335</a>
        </span>
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  data: () => ({
    active: 0,
    username: '',
    msm: '',
    upwd1: '',
    upwd2: '',
    userinfo: {
      uname: '',
      upwd: ''
    },
    flag1: false,
    flag2: false
  }),
  created () {
    // this.$route.meta.keepAlive = true
    this.$store.state.title = '猫眼电影'
    this.$store.dispatch('changeActive', this.$route.path)
  },
  destroyed () {
    if (this.flag1 && this.flag2) {
      this.$route.meta.keepAlive = false
    } else {
      this.$route.meta.keepAlive = true
    }
  },
  methods: {
    async next () {
      if (this.flag1 && this.flag2 && this.active === 2) {
        let url = '/reg'
        const {
          data: { status, msg }
        } = await this.$http.post(url, this.userinfo)
        if (status !== -101) {
          this.$Toast(msg)
          setTimeout(() => {
            this.$router.push('/account/login')
          }, 800)
        } else {
          this.$Toast('注册失败!')
        }
      }
      if (this.active >= 2) {
        return
      }
      this.active++
    },
    async usernamemsg () {
      if (this.username === '') {
        return ''
      } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username)) {
        return this.$Toast('手机号码格式错误')
      } else {
        // return
        let url = '/regtest'
        const {
          data: { status, msg }
        } = await this.$http.post(url, { uname: this.username })
        if (Number(status) !== -200) {
          this.$Toast(msg)
          this.userinfo.uname = this.username
          this.flag1 = true
          console.log(this.$route.meta.keepAlive)
          this.$route.meta.keepAlive = false
        } else {
          this.$Toast('该手机号已存在!')
          this.flag1 = false
          this.$route.meta.keepAlive = false
        }
      }
    },
    async usernamemsg1 () {
      if (this.username === '') {
        this.flag1 = false
        return ''
      } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username)) {
        this.flag1 = false
        return false
      } else {
        let url = '/regtest'
        const {
          data: { status }
        } = await this.$http.post(url, { uname: this.username })
        console.log(status)
        if (Number(status) !== -200) {
          this.userinfo.uname = this.username
          this.flag1 = true
          this.$Toast('该手机号可用!')
        } else {
          this.$Toast('该手机号已存在!')
          this.flag1 = false
        }
      }
    },
    passwordmsg () {
      console.log(this.upwd1, this.upwd2)
      if (this.upwd1 === '') {
        return ''
      } else if (this.upwd1.length < 6) {
        this.$Toast('密码不能小于6位')
      } else if (this.upwd1 !== this.upwd2) {
        this.$Toast('两次密码输入的不一致!')
      } else {
        this.userinfo.upwd = this.upwd2
        this.flag2 = true
        console.log(this.userinfo)
      }
    }
  },
  computed: {
    moretext () {
      return this.active === 2 ? '注册' : '下一步'
    }
  },
  beforeRouteLeave (to, from, next) {
    if (this.flag2 && this.flag1) {
      this.$route.meta.keepAlive = false
      next()
    } else if ((this.username.length > 0 && this.msm.length === 0) || (this.msm.length > 0 && this.username.length === 0)) {
      this.$Dialog
        .confirm({
          title: '提示',
          message: '您的注册未完成，确定退出吗？'
        })
        .then(() => {
          this.$route.meta.keepAlive = true
          next()
        })
        .catch(() => {})
    } else {
      next()
    }
  }
}
</script>
<style lang="less" scoped>
.register {
  .tip-wrapper {
    line-height: 18px;
    text-align: justify;
    label {
      .mt {
        width: 24px;
        height: 24px;
        text-align: center;
        outline: 0;
        border: 0;
        color: #fff;
        background-color: #df2d2d;
        margin: 0 2px;
      }
      .mt[type='checkbox']:checked:after {
        content: '✓';
        display: block;
        border-radius: 2px;
        width: 22px;
        height: 22px;
        font-family: base_icon;
        background-color: #df2d2d;
      }
      a {
        color: #df2d2d;
        text-decoration: none;
        outline: 0;
      }
    }
  }
  .btn-wrapper {
    .regBtn {
      width: 94%;
      margin: 2%;
    }
  }
  footer {
    .copyright {
      text-align: center;
      a {
        color: #000;
      }
    }
  }
}
</style>
